<blockquote class="layui-elem-quote">
    修改下面的数据和模版，可直接呈现渲染后的结果。
</blockquote>

<div class="site-demo-laytpl">

    <div>
        <span>数据</span>
        <span>模版</span>
    </div>

    <textarea class="site-demo-text" id="data">{
  "title": "Layui常用模块"
  ,"list": [
    {
      "modname": "弹层"
      ,"alias": "layer"
      ,"site": "layer.layui.com"
    }
    ,{
      "modname": "表单"
      ,"alias": "form"
    }
    ,{
      "modname": "分页"
      ,"alias": "laypage"
    }
    ,{
      "modname": "日期"
      ,"alias": "laydate"
    }
    ,{
      "modname": "上传"
      ,"alias": "upload"
    }
  ]
}
        </textarea>

    <textarea class="site-demo-text" id="tpl">&lt;h3&gt;{{ d.title }}&lt;/h3&gt;
&lt;ul&gt;
{{#  layui.each(d.list, function(index, item){ }}
  &lt;li&gt;
    &lt;span&gt;{{ item.modname }}&lt;/span&gt;
    &lt;span&gt;{{ item.alias }}：&lt;/span&gt;
    &lt;span&gt;{{ item.site || '' }}&lt;/span&gt;
  &lt;/li&gt;
{{#  }); }}

{{#  if(d.list.length === 0){ }}
  无数据
{{#  } }}
&lt;/ul&gt;
        </textarea>


</div>

<div class="site-demo-tplres">
    <h2 class="site-demo-tplh2">视图结果</h2>
    <div class="site-demo-tplview" id="view"><h3>Layui常用模块</h3>
        <ul>
            <li><span>弹层</span> <span>layer：</span> <span>layer.layui.com</span></li>
            <li><span>表单</span> <span>form：</span> <span></span></li>
            <li><span>分页</span> <span>laypage：</span> <span></span></li>
            <li><span>日期</span> <span>laydate：</span> <span></span></li>
            <li><span>上传</span> <span>upload：</span> <span></span></li>
        </ul>
    </div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>其它</legend>
</fieldset>

<div class="layui-elem-quote" style="margin-top: 20px;">
    <p>Layui - 精心为你雕琢</p>
</div>
